<script setup lang="ts">
import { Scan, CloseSharp, RemoveOutline } from '@vicons/ionicons5'
type Props = {
  headTitle?: string
  showClose?: boolean
  showMax?: boolean
  showMin?: boolean
  fontColor?: string
}

withDefaults(defineProps<Props>(), {
  headTitle: '',
  showClose: true,
  showMax: true,
  showMin: true,
  fontColor: '#000'
})

const close = (): void => {
  window.api.onAppQuit()
}

const onMaximize = (): void => {
  window.api.onMaximize()
}

const onMinimize = (): void => {
  window.api.onMinimize()
}
</script>

<template>
  <div class="title_bar">
    <div class="title">{{ headTitle }}</div>
    <div class="right_box">
      <div v-if="showMin" class="item_button" @click="onMinimize">
        <n-icon size="15">
          <RemoveOutline />
        </n-icon>
      </div>
      <div v-if="showMax" class="item_button" @click="onMaximize">
        <n-icon size="15">
          <Scan />
        </n-icon>
      </div>
      <div v-if="showClose" class="item_button" @click="close">
        <n-icon size="20">
          <CloseSharp />
        </n-icon>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.title_bar {
  width: calc(100% - 10px);
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  user-select: none;
  justify-content: space-between;
  font-size: 12px;
  color: v-bind(fontColor);
  .right_box {
    display: flex;
    height: 100%;
    .item_button {
      width: 40px;
      font-size: 10px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-app-region: no-drag;
      &:hover {
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
      }
    }
  }
}
</style>
